<template>
  <div class="el-scroll-box">
    <el-scrollbar ref="wrapperScroll">
      <!-- 轮播图 -->
      <el-carousel class="carousel-wrap" height="300px">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img :src="item.url" alt="" width="100%" height="100%" object-fit="cover">
        </el-carousel-item>
      </el-carousel>

      <!-- 内容 -->
      <div class="content">
        <template v-if="!Global.isEmptyObject(contentList)">
          <div v-for="(item, key) in contentList" :key="key" class="content-list">
            <h3 style="text-align:center">{{ key }}</h3>
            <swiper class="swiper" :options="swiperOption">
              <swiper-slide v-for="it in item" :key="it.id">
                <div class="card-list">
                  <h4>{{ it.name }}</h4>
                  <p>
                    {{ it.remark }}
                  </p>
                  <button @click="toStudyLine(it, key)">
                    开始学习>
                  </button>
                </div>
              </swiper-slide>
            </swiper>
            <template v-if="item.length>4">
              <el-button slot="button-prev" class="arrow-btn arrow-left" icon="el-icon-arrow-left" circle />
              <el-button slot="button-next" class="arrow-btn arrow-right" icon="el-icon-arrow-right" circle />
            </template>
          </div>
        </template>
        <empty-data v-else text="暂无数据" />

        <!-- 热门场景 -->
        <div v-if="hotBook.length" class="content-list">
          <h3 style="text-align:center">热门视频</h3>
          <el-row :gutter="20">
            <el-col v-for="item in hotBook" :key="item.id" class="hot-book" :span="6">
              <div class="bg-mask" :style="{backgroundImage: `url(${item.picFile})`}" @click="$router.push({ name: 'CourseBody', params: { id:item.id } })">
                <font-icon class="icon-play" icon-class="icon-play" />
                <span class="video-time">{{ item.bookTime }}</span>
              </div>
              <p>
                <span>热门</span>
                <span :title="item.name"><a href="javascript:;">{{ item.name }}</a></span>
              </p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Global from '../../../public/js/global'
import EmptyData from '@/components/EmptyData'
import Sticky from '@/components/Sticky'
import { getLearnGroupQuery } from '@/api/learnCenter'
import Main_banner from '@/assets/user/Main_banner.jpg'
import Main_banner2 from '@/assets/user/Main_banner2.jpg'
import { fileHostUrl, formatSeconds } from '@/utils'
// swiper
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
export default {
  name: 'Dashboard',
  components: {
    EmptyData,
    Sticky,
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      Global,
      contentList: {},
      hotBook: [],
      banner: [{ id: 1, url: Main_banner }, { id: 2, url: Main_banner2 }],

      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 0,
        pagination: {
          clickable: true
        },
        navigation: {
          prevEl: '.arrow-left',
          nextEl: '.arrow-right'
        }
      }
    }
  },
  created() {
    this.initWindow()
  },
  mounted() {
    // 监听滚动事件
    this.wrapperScroll()
  },
  destroyed() {
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      getLearnGroupQuery(vPar).then(vPar => {
        // console.log(vPar)
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_learn_book'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['rootID'] = table.getValueByName('RootID')
          node['rootName'] = table.getValueByName('RootName')
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['remark'] = table.getValueByName('Remark')
          node['bookIDs'] = table.getValueByName('BookIDs')
          node['bookNames'] = table.getValueByName('BookNames').split(',')
          nodes.push(node)
          table.next()
        }

        const dataObj = {}
        nodes.forEach(item => {
          if (dataObj[item['rootName']]) {
            dataObj[item['rootName']].push(item)
          } else {
            dataObj[item['rootName']] = [item]
          }
        })
        // console.log('dataObj')
        // console.log(dataObj)
        this.contentList = dataObj
        // 获取热门视频
        this.getHotBook(vPar)
      })
    },
    // 获取热门视频
    getHotBook(vPar) {
      const nodes = []
      const table = new this.SQLTable(vPar.getTable('k_hot_learn_book'))
      table.first()
      while (!table.eof()) {
        const node = {}
        node['id'] = table.getValueByName('ID')
        node['name'] = table.getValueByName('Name')
        node['enable'] = table.getValueByName('Enable')
        node['bookTime'] = formatSeconds(table.getValueByName('BookTime'))
        node['picFile'] = fileHostUrl + '/' + table.getValueByName('PicFile')
        node['iCount'] = table.getValueByName('iCount')
        node['enable'] = table.getValueByName('Enable')
        if (node['enable'] === '1' && node['bookTime'] !== '00:00:00') { // 启用并且bookTime不等于00:00:00
          nodes.push(node)
        }
        table.next()
      }
      this.hotBook = nodes
      // console.log('hotBook')
      // console.log(this.hotBook)
    },
    // 查看学习路线
    toStudyLine(item, key) {
      this.$openUrl('StudyLine', '', { id: item.id, name: item.name, pName: key }, { id: item.id })
    },
    // 监听滚动事件
    wrapperScroll() {
      const scrollbarEl = this.$refs.wrapperScroll.wrap
      scrollbarEl.onscroll = () => {
        this.$refs.sticky && this.$refs.sticky.handleScroll()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

.content {
  width: 80%;
  margin: 0 auto;
  // margin-top: 360px;
  .content-item {
    display: flex;
    flex-wrap: wrap;
    .c-item {
      margin-bottom: 10px;
      margin-right: 10px;
      width: 350px;
      flex-shrink: 0;
      padding: 10px;
      display: flex;
      flex-direction: column;
      background-image: url('../../assets/dashboard/card_background.png');
      background-repeat: no-repeat;
      background-size: cover;
      .c-title {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #aaa;
      }
      .c-desc {
        margin-top: 20px;
        font-weight: 400;
        font-size: 13px;
        border-left: 2px solid $primaryColor;
        padding-left: 5px;
        color: #888888;
      }
      .start-study {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #fff;
        background-color: $plainColor;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        &:hover {
          background-color: $primaryColor;
        }
      }
    }
  }
}

.content-list {
  position: relative;
}
.card-list {
  position: relative;
	height: 316px;
  background-image: url('../../assets/user/card_1.png');
  background-size: 100% 100%;
  border: 1px solid transparent;
  h4 {
    text-align: center;
    margin-top: 60px;
  }
  p {
    padding: 0 30px;
    font-size: 14px;
    line-height: 24px;
    color: #5b5b5b;
    text-align: left;
    margin-top: 30px;
  }
  button {
    cursor: pointer;
    position: absolute;
    margin-top: 10px;
    background: transparent;
    outline: none;
    border: none;
    font-size: 14px;
    color: #3d6dea;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.arrow-btn {
  position: absolute;
  top: 50%;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: .3s;
  border-radius: 50%;
  background-color: rgba(31,45,61,.11);
  color: #fff;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  &:hover {
    background-color: rgba(31,45,61,.23);
  }
}
.arrow-left {
  left: -5%;
}
.arrow-right {
  right: -5%;
}
.hot-book {
  p {
    display: flex;
    align-items: center;
    span:nth-child(1) {
      font-size: 12px;
      color: #ffffff;
      background-color: #f27801;
      border-radius: 2px;
      padding: 5px 8px;
      margin-right: 5px;
    }
    span:nth-child(2) {
      flex: 1;
      font-size: 16px;
      color: #333333;
      display: -webkit-box; /* 盒子类型 */
      word-break: break-all; /* 自动换行的处理方法。允许在单词内换行 */
      text-overflow: ellipsis; /* 溢出时用... */
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:1; /* 行数 */
    }
  }
}
.bg-mask {
  height: 218px;
	border-radius: 4px;
  background-size: cover;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .icon-play {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 48px;
    color: #fff;
    z-index: 10;
  }
  .video-time {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, .5);
    padding: 6px 8px;
    font-size: 12px;
    color: #ffffff;
    border-radius: 4px;
  }
  &:hover{
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .3);
    }
    .icon-play, .video-time {
      display: block;
    }
  }
}
</style>
